import React, {useState, useEffect} from 'react'
import { Toast, Empty } from 'react-vant'
import NavBar from '@components/NavBar'
import request from "@services/request";
import './index.less'

const Exchange = (props) => {
  const [amount, setAmount] = useState('')

  const { publicKey, signMessage } = JSON.parse(localStorage.getItem('biwSign') || '{}')

  useEffect(() => {
  }, [])

  const handleExchange = async () => {
    const params = {
      amount,
      sign: signMessage,
      publicKey: publicKey
    }

    try {
      const res = await request.post("app_server/exchange", params);
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <>
      <div className="background"></div>
      <div className="exchange">
        <NavBar title="兑换" />
        <div className="main">
          <div className="exchange-form">
            <div className="form-item">
              <span className="balance-text">余额</span>
              <span className="balance-amount-text">{props.state.balanceUsdt} USDT</span>
            </div>
            <div className="form-item">
              <span className="exchange-amount-text">兑换金额</span>
              <input type="number" value={amount} onChange={(e) => {
                const value = e.target.value.replace(/\D+/g, '');
                setAmount(value)
              }} className="exchange-amount-input" placeholder="请输入兑换金额" />
            </div>
            <button className="exchange-btn" onClick={() => handleExchange()}>立即兑换</button>
          </div>
          <div className="exchange-log">
            <div className="exchange-log-title">兑换记录</div>
            {
              props.state.listExchange.length > 0 ? (
                <div className="table-container">
                  <div className="table-row">
                      <div className="table-cell header-cell">USDT金额</div>
                      <div className="table-cell header-cell">NANA金额</div>
                      <div className="table-cell header-cell">时间</div>
                  </div>
                  {
                    props.state.listExchange.map(item => (
                      <div className="table-row">
                          <div className="table-cell">{item.amountUsdt}</div>
                          <div className="table-cell">{item.amountNa}</div>
                          <div className="table-cell">{item.createdAt}</div>
                      </div>
                    ))
                  }
                </div>
              ) : <Empty description="暂无兑换记录" />
            }
          </div>
        </div>
      </div>
    </>
  )
}

export default Exchange;